<ng-container>
  <h1 bitTypography="h1">{{ "riskInsights" | i18n }}</h1>
  <div class="tw-text-main tw-max-w-4xl tw-mb-2">
    {{ "reviewAtRiskPasswords" | i18n }}
  </div>
  <div
    *ngIf="dataLastUpdated$ | async"
    class="tw-bg-primary-100 tw-rounded-lg tw-w-full tw-px-8 tw-py-4 tw-my-4 tw-flex tw-items-center"
  >
    <i
      class="bwi bwi-exclamation-triangle bwi-lg tw-text-[1.2rem] tw-text-muted"
      aria-hidden="true"
    ></i>
    <span class="tw-mx-4">{{
      "dataLastUpdated" | i18n: (dataLastUpdated$ | async | date: "MMMM d, y 'at' h:mm a")
    }}</span>
    <span class="tw-flex tw-justify-center tw-w-16">
      <a
        *ngIf="!(isRefreshing$ | async)"
        bitButton
        buttonType="unstyled"
        class="tw-border-none !tw-font-normal tw-cursor-pointer !tw-py-0"
        [bitAction]="refreshData.bind(this)"
      >
        {{ "refresh" | i18n }}
      </a>
      <span>
        <i
          *ngIf="isRefreshing$ | async"
          class="bwi bwi-spinner bwi-spin tw-text-muted tw-text-[1.2rem]"
          aria-hidden="true"
        ></i>
      </span>
    </span>
  </div>
  <bit-tab-group [(selectedIndex)]="tabIndex" (selectedIndexChange)="onTabChange($event)">
    <bit-tab label="{{ 'allApplicationsWithCount' | i18n: appsCount }}">
      <tools-all-applications></tools-all-applications>
    </bit-tab>
    <bit-tab>
      <ng-template bitTabLabel>
        <i class="bwi bwi-star"></i>
        {{ "criticalApplicationsWithCount" | i18n: (criticalApps$ | async)?.length ?? 0 }}
      </ng-template>
      <tools-critical-applications></tools-critical-applications>
    </bit-tab>
  </bit-tab-group>

  <bit-drawer
    style="width: 30%"
    [(open)]="dataService.openDrawer"
    (openChange)="dataService.closeDrawer()"
  >
    <ng-container *ngIf="dataService.isActiveDrawerType(drawerTypes.OrgAtRiskMembers)">
      <bit-drawer-header
        title="{{ 'atRiskMembersWithCount' | i18n: dataService.atRiskMemberDetails.length }}"
      >
      </bit-drawer-header>
      <bit-drawer-body>
        <span bitTypography="body1" class="tw-text-muted tw-text-sm">{{
          (dataService.atRiskMemberDetails.length > 0
            ? "atRiskMembersDescription"
            : "atRiskMembersDescriptionNone"
          ) | i18n
        }}</span>
        <ng-container *ngIf="dataService.atRiskMemberDetails.length > 0">
          <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
            <div bitTypography="body2" class="tw-text-sm tw-font-bold">{{ "email" | i18n }}</div>
            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
              {{ "atRiskPasswords" | i18n }}
            </div>
          </div>
          <ng-container *ngFor="let member of dataService.atRiskMemberDetails">
            <div class="tw-flex tw-justify-between tw-mt-2">
              <div>{{ member.email }}</div>
              <div>{{ member.atRiskPasswordCount }}</div>
            </div>
          </ng-container>
        </ng-container>
      </bit-drawer-body>
    </ng-container>

    <ng-container *ngIf="dataService.isActiveDrawerType(drawerTypes.AppAtRiskMembers)">
      <bit-drawer-header title="{{ dataService.appAtRiskMembers.applicationName }}">
      </bit-drawer-header>
      <bit-drawer-body>
        <div bitTypography="body1" class="tw-mb-2">
          {{ "atRiskMembersWithCount" | i18n: dataService.appAtRiskMembers.members.length }}
        </div>
        <div bitTypography="body1" class="tw-text-muted tw-text-sm tw-mb-2">
          {{
            (dataService.appAtRiskMembers.members.length > 0
              ? "atRiskMembersDescriptionWithApp"
              : "atRiskMembersDescriptionWithAppNone"
            ) | i18n: dataService.appAtRiskMembers.applicationName
          }}
        </div>
        <div class="tw-mt-1">
          <ng-container *ngFor="let member of dataService.appAtRiskMembers.members">
            <div>{{ member.email }}</div>
          </ng-container>
        </div>
      </bit-drawer-body>
    </ng-container>

    <ng-container *ngIf="dataService.isActiveDrawerType(drawerTypes.OrgAtRiskApps)">
      <bit-drawer-header
        title="{{ 'atRiskApplicationsWithCount' | i18n: dataService.atRiskAppDetails.length }}"
      >
      </bit-drawer-header>

      <bit-drawer-body>
        <span bitTypography="body2" class="tw-text-muted tw-text-sm">{{
          (dataService.atRiskAppDetails.length > 0
            ? "atRiskApplicationsDescription"
            : "atRiskApplicationsDescriptionNone"
          ) | i18n
        }}</span>
        <ng-container *ngIf="dataService.atRiskAppDetails.length > 0">
          <div class="tw-flex tw-justify-between tw-mt-2 tw-text-muted">
            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
              {{ "application" | i18n }}
            </div>
            <div bitTypography="body2" class="tw-text-sm tw-font-bold">
              {{ "atRiskPasswords" | i18n }}
            </div>
          </div>
          <ng-container *ngFor="let app of dataService.atRiskAppDetails">
            <div class="tw-flex tw-justify-between tw-mt-2">
              <div>{{ app.applicationName }}</div>
              <div>{{ app.atRiskPasswordCount }}</div>
            </div>
          </ng-container>
        </ng-container>
      </bit-drawer-body>
    </ng-container>
  </bit-drawer>
</ng-container>
